<template>
  <el-drawer :title="$t('message.ddxq')" :visible.sync="showOrder" size="1000px" :wrapper-closable="!modalDialog">
    <div class="property-title">{{ $t('message.ddxx') }}</div>
    <div class="df_ac">
      <div>
        <span class="key">{{ $t('message.ddbh') }}：</span>
        <span class="value">{{ detail.orderId }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.ddzt') }}：</span>
        <span class="value">{{ detail.orderStatus }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.createTime') }}：</span>
        <span class="value">{{ detail.orderTime }}</span>
      </div>
      <div v-if="detail.payTime" class="flex1">
        <span class="key">{{ $t('message.paytime') }}：</span>
        <span class="value">{{ detail.payTime }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.ddly') }}：</span>
        <span class="value">{{ fromType(detail.fromType) }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.ddje') }}：</span>
        <span class="value">{{ detail.orderPrice }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.zffs') }}：</span>
        <span class="value">{{ detail.payMethod || '-' }}</span>
      </div>
      <div v-if="detail.mixedPayMethod">
        <span class="key">{{ $t('message.hhzffs') }}：</span>
        <span class="value">{{ detail.mixedPayMethod || '-' }}</span>
      </div>
      <div v-if="detail.mixedPayMoney">
        <span class="key">{{ $t('message.hhzfje') }}：</span>
        <span class="value">{{ detail.mixedPayMoney || '-' }}</span>
      </div>
      <div v-if="detail.cardPayMoney">
        <span class="key">{{ $t('message.hhzfhykje') }}：</span>
        <span class="value">{{ detail.cardPayMoney || '-' }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.czy') }}：</span>
        <span class="value">{{ detail.createUser }}</span>
      </div>
      <div v-if="detail.finishTime">
        <span class="key">{{ $t('message.wcsj') }}：</span>
        <span class="value">{{ detail.finishTime }}</span>
      </div>
      <div v-if="detail.refundPrice">
        <span class="key">{{ $t('message.tkje') }}：</span>
        <span class="value">{{ detail.refundPrice }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.bz') }}：</span>
        <span class="value">{{ detail.remake }}</span>
      </div>
    </div>

    <div class="line-style mb20" />
    <div class="property-title">{{ $t('message.kpqk') }}</div>
    <div class="df_ac">
      <div>
        <span class="key">{{ $t('message.kpzt') }}：</span>
        <span class="value">{{ detail.invoiceStatus }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.kpzt') }}：</span>
        <span class="value">{{ detail.invoiceTime || "~" }}</span>
      </div>
    </div>

    <div class="line-style mb20" />
    <div class="property-title">{{ $t('message.mjxx') }}</div>
    <div class="df_ac">
      <div>
        <span class="key">{{ $t('message.name') }}：</span>
        <span class="value">{{ detail.memberName }}</span>
      </div>
      <div>
        <span class="key">{{ $t('message.lxdh') }}：</span>
        <span class="value">{{ detail.memberPhone || '-' }}</span>
      </div>
      <div v-if="detail.memberId">
        <span class="key">{{ $t('message.hykh') }}：</span>
        <span class="value">{{ detail.memberId }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">{{ $t('message.cdxx') }}</div>

    <el-table :data="detail.orderDetailList" border fit :header-row-class-name="'table-header'" class="doumee-element-table">
      <el-table-column type="index" align="center" :label="$t('message.bh')" width="50" />
      <el-table-column align="center" :label="$t('message.cd')" prop="sitePlace" min-width="180" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.rq')" prop="day" min-width="100" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.sjd')" min-width="100">
        <template v-slot="scope">
          <span>{{ scope.row.beginTime }}-{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.oldprice')" min-width="100" prop="price" />
      <el-table-column align="center" :label="$t('message.zhj')" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.memberPrice?scope.row.memberPrice : scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.status')" min-width="100">
        <template v-slot="scope">
          <!-- <span>{{ isDiscardName(scope.row.isDiscard) }}</span> -->
          <span>{{ scope.row.statusName }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="detail.detailMoneyRespParam" class="bottom_wrap">
      <div class="line">
        <span>{{ $t('message.ddspje') }}：</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.orderPrice || 0 }}</span>
        <span>{{ $t('message.yuan') }}</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.memberDiscount" class="line">
        <span>{{ detail.payMethod == $t('message.zxkzf')? $t('message.zxkdk') + '：' : $t('message.hydk') + '：' }}</span>
        <span v-if="detail.detailMoneyRespParam.memberDiscount">-</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.memberDiscount || 0 }}</span>
        <span>{{ $t('message.yuan') }}</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.marketingPolicy" class="line">
        <span>{{ $t('message.yxzc') }}：</span>
        <span v-if="detail.detailMoneyRespParam.marketingPolicy">-</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.marketingPolicy || 0 }}</span>
        <span>{{ $t('message.yuan') }}</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.groupBuyCoupon" class="line">
        <span>{{ $t('message.tgj') }}：</span>
        <span v-if="detail.detailMoneyRespParam.groupBuyCoupon">-</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.groupBuyCoupon || 0 }}</span>
        <span>{{ $t('message.yuan') }}</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.discountCoupon" class="line">
        <span>{{ $t('message.yhj') }}：</span>
        <span v-if="detail.detailMoneyRespParam.discountCoupon">-</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.discountCoupon || 0 }}</span>
        <span>{{ $t('message.yuan') }}</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.integral" class="line">
        <span>{{ $t('message.jfdk') }}：</span>
        <span v-if="detail.detailMoneyRespParam.integral">-</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.integral || 0 }}</span>
        <span>{{ $t('message.yuan') }}</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.getPrice || detail.detailMoneyRespParam.getPrice === 0" class="line secondColor">
        <span>{{ $t('message.shk') }}：</span>
        <span v-if="detail.detailMoneyRespParam">{{ detail.detailMoneyRespParam.getPrice || 0 }} </span>
        <span>{{ $t('message.yuan') }}{{ detail.mealsMemberId?'(' + $t('message.ydck') + ')':'' }}</span>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { siteOrderInfo } from '@/api'
import store from '@/store'
export default {
  name: 'OrderDetail',
  data () {
    return {
      detail: {},
      modalDialog: store.getters.dialog,
      showOrder: false, // 弹窗
      listLoading: false
    }
  },
  methods: {
    showDetail (detail) {
      this.showOrder = true
      this.detail = detail
    },
    fromType (type) {
      switch (type) {
        case '02': return this.$t('message.cgpcd')
        case '01': return this.$t('message.xcx')
        default: return '-'
      }
    },
    isDiscardName (type) {
      if (this.detail.orderStatusStr === '0') {
        if (type === '0') {
          return this.$t('message.dzf')
        } else if (type === '1') {
          return this.$t('message.yqx')
        }
      } else if (this.detail.orderStatusStr === '2') {
        return this.$t('message.yqx')
      } else if (this.detail.orderStatusStr === '5') {
        return this.$t('message.ytk')
      } else if (this.detail.orderStatusStr === '1') {
        return this.$t('message.cswzf')
      } else if (type === '0' && this.detail.orderStatusStr === '3') {
        return this.$t('message.ypay')
      } else if (type === '1') {
        return this.$t('message.yqx')
        // return this.$t('message.ytk')
      } else {
        return '-'
      }
    },
    getOrderDetail (businessId) {
      this.listLoading = true
      siteOrderInfo({ param: { businessId } }).then((res) => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.showOrder = true
          this.detail = res.record
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.df_ac {
  flex-wrap: wrap;
  div {
    width: 33.33%;
    margin-bottom: 20px;
    .key {
      color: #666666;
      display: inline-block;
    }
    .value {
      color: #222;
    }
  }
}
.bottom_wrap {
  margin-top: 30px;
  text-align: right;
  .line {
    margin-bottom: 10px;
  }
}
</style>
